<template>
  <div class="lis-jcsj-zkp-add z-col">
    <div class="z-row z-flex--wrap">
      <el-form-item label="仪器" label-width="45">
        <el-select v-model="formData.yqid" :disabled="!!formData.id">
          <el-option v-for="it in yqList" :key="it.id" :label="it.yqmc" :value="it.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="质控品" label-width="60">
        <el-input v-model="formData.mc" :disabled="!!formData.id"></el-input>
      </el-form-item>
      <el-form-item label="生产厂家" label-width="90">
        <el-input v-model="formData.sccj"></el-input>
      </el-form-item>
      <el-form-item label="批号" label-width="45">
        <el-input v-model="formData.ph"> </el-input>
      </el-form-item>
      <el-form-item label="供应商" label-width="60">
        <el-input v-model="formData.gys"> </el-input>
      </el-form-item>
      <el-form-item label="试剂供应商" label-width="90">
        <el-input v-model="formData.sjgys"> </el-input>
      </el-form-item>
      <el-form-item label="水平" label-width="45">
        <el-select v-model="formData.zkspdm">
          <el-option v-for="it in zkspZd" :key="it.id" :label="it.mc" :value="it.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="有效期" label-width="60">
        <el-date-picker
          v-model="formData.yxq"
          type="datetime"
          style="width: 100%"
          format="YYYY/MM/DD HH:mm:ss"
          value-format="YYYY/MM/DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="启用日期" label-width="90"
        ><el-date-picker
          v-model="formData.qyrq"
          type="datetime"
          style="width: 100%"
          format="YYYY/MM/DD HH:mm:ss"
          value-format="YYYY/MM/DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label-width="10" class="btn">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="warning" @click="cancel">取消</el-button>
        <el-button type="success" @click="add">新增</el-button>
        <el-button type="danger" @click="del">删除</el-button>
      </el-form-item>
    </div>
    <z-block>
      <z-form-table
        ref="formTable"
        highlight-current-row
        border
        :cols="addTableCols"
        :data="tableData"
        @current-change="currentRow = $event"
      ></z-form-table>
    </z-block>
    <el-dialog v-model="addShow" title="质控项目新增筛选" width="800" align-center>
      <v-add :yqid="formData.yqid" @sure="sure" ref="addModule" />
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { use } from './use'
import { zkpAddEmits, zkpAddProps } from './prop'
import { yqList, zkspZd } from '@utils'
import { addTableCols } from './data'
const vAdd = defineAsyncComponent(() => import('../zkp-xm-add/index.vue'))
defineOptions({
  name: 'lis-jcsj-zkp-add'
})
const props = defineProps(zkpAddProps)
const emit = defineEmits(zkpAddEmits)
const {
  tableData,
  formData,
  cancel,
  add,
  addShow,
  sure,
  addModule,
  formTable,
  save,
  del,
  currentRow
} = use(props, emit)
</script>
<style lang="scss">
.lis-jcsj-zkp-add {
  flex-basis: 55em;
  max-width: 50vw;
  height: 100%;
  // border-left: 1px solid var(--color-border-1);
  padding-top: 0.1rem;
  padding-left: 0.05rem;
  margin-left: 0.05rem;
  .el-form-item {
    &:nth-child(3n + 1) {
      width: 30%;
    }
    &:nth-child(3n + 2) {
      width: 33%;
    }
    &:nth-child(3n + 3) {
      width: 37%;
    }
    &.btn {
      width: auto;
    }
  }
}
</style>
